import React from 'react';
import {View, Image, StyleSheet, Dimensions} from 'react-native';
import Swiper_ from 'react-native-swiper';

const {width} = Dimensions.get('window');

const SwiperStyles = StyleSheet.create({
  swiperContainer: {
    width: width - 10,
    height: 130,
    padding: 5,
    borderRadius: 5,
    overflow: 'hidden',
  },
  swiper: {
    overflow: 'hidden',
  },
  swiperItem: {
    width: '100%',
    height: 120,
    overflow: 'hidden',
  },
  swiperImage: {
    width: '100%',
    height: 120,
    borderRadius: 5,
  },
});

export default function Swiper(props) {
  return (
    <View style={SwiperStyles.swiperContainer}>
      <Swiper_ showsButtons={true} autoplay style={SwiperStyles.swiper}>
        {props.images.map(item => {
          return (
            <View style={SwiperStyles.swiperItem} key={item.id}>
              <Image style={SwiperStyles.swiperImage} source={item.image} />
            </View>
          );
        })}
      </Swiper_>
    </View>
  );
}
